<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@	page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	response.setHeader("Pragma","No-Cache");  
	response.setHeader("Cache-Control","No-Cache");  
	response.setDateHeader("Expires",   0);   
	%>
    <style type="text/css" media="screen">
    <!--      
     DIV.selHolder { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;width: 200px;}
     DIV.selHolder2 { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;width: 690px;}
     SELECT.selCont { margin: 10px; width: 190px; }
    -->
    </style>
    <script type="text/javascript" charset="UTF-8" src="/js/select-chain.js" charset="UTF-8"></script>
    <script type="text/javascript">
    <!--
    $(function () {

    	 $("#loadingImg").dialog({
   		  title: '资料载入中',
   			bgiframe: true,
   			autoOpen: false,
   			height: 150,
   			width:280,
   			modal: true
   		});			
    		    	        
    	$('#elementSelect').find('option').remove().end();
    	$('#attributeSelect').find('option').remove().end();
    	$('#itemSelect').find('option').remove().end();
    	$('#unitSelect').find('option').remove().end();
    	$('#listSelect').find('option').remove().end();
    	
        var cat = $('#categorySelect');
        var el = $('#elementSelect');
        var attr = $('#attributeSelect');
        var item = $('#itemSelect');
        var unit = $('#unitSelect');
        var list = $('#listSelect');
              
      //第0层
		$("#categorySelect").click(function(){
			$('#categorycontent').hide();
			$.ajax({
			    url: '<%=ServerValue.getMidContextPath()%>/category/checkJsonData.do',
			    type: 'post',
			    dataType: 'json',
			    data: {categoryid:$(this).val(), callback: 'selectCallback'},
			    cache: false,
			    beforeSend: function(xhr) {
					$("#loadingImg").dialog("open");
					$('#elementSelect').find('option').remove().end();
				   	$('#attributeSelect').find('option').remove().end();
				   	$('#itemSelect').find('option').remove().end();
				   	$('#unitSelect').find('option').remove().end();
				   	$('#listSelect').find('option').remove().end();						
			    },
			    success: function( strData ){
			    	selectCallback(strData, 'elementSelect');
			    	$("#loadingImg").dialog("close");
				}
			});		   						
		});

		//第1层
		$("#elementSelect").click(eleSelectClick);

		function eleSelectClick() {

			if(null!=$(this).val()){
				$('#attributeSelect').find('option').remove().end();
			   	$('#itemSelect').find('option').remove().end();
			   	$('#unitSelect').find('option').remove().end();
			   	$('#listSelect').find('option').remove().end();
				if($(this).val()[0]!='x')
				$.ajax({
				    url: '<%=ServerValue.getMidContextPath()%>/category/checkJsonData.do',
				    type: 'post',
				    dataType: 'json',
				    data: {categoryid:$(this).val(), callback: 'selectCallback'},
				    cache: false,
				    beforeSend: function(xhr) {
						$("#loadingImg").dialog("open");
						$('#categorycontent').hide();
				    },
				    success: function( strData ){
				    	selectCallback(strData, 'attributeSelect');
					}
				});		
				$('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#elementSelect").val()+'&initlevel=1');
				$('#categorycontent').show();			   						
			}
		}
		//第2层
		$("#attributeSelect").click(function(){
			if(null!=$(this).val()){
				$('#itemSelect').find('option').remove().end();
			   	$('#unitSelect').find('option').remove().end();
			   	$('#listSelect').find('option').remove().end();
			   	if($(this).val()[0]!='x')		
				$.ajax({
				    url: '<%=ServerValue.getMidContextPath()%>/category/checkJsonData.do',
				    type: 'post',
				    dataType: 'json',
				    data: {categoryid:$(this).val(), callback: 'selectCallback'},
				    cache: false,
				    beforeSend: function(xhr) {
						$("#loadingImg").dialog("open");	
						$('#categorycontent').hide();			
				    },
				    success: function( strData ){
				    	selectCallback(strData, 'itemSelect');
					}
				});
		   	$('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#attributeSelect").val()+'&initlevel=2');
		   	$('#categorycontent').show();
			}		   						
		});

		
		//第3层
		$("#itemSelect").click(function(){
			if(null!=$(this).val()){
				$('#unitSelect').find('option').remove().end();
			   	$('#listSelect').find('option').remove().end();	
			   	if($(this).val()[0]!='x')	
				$.ajax({
				    url: '<%=ServerValue.getMidContextPath()%>/category/checkJsonData.do',
				    type: 'post',
				    dataType: 'json',
				    data: {categoryid:$(this).val(), callback: 'selectCallback'},
				    cache: false,
				    beforeSend: function(xhr) {
						$("#loadingImg").dialog("open");		
						$('#categorycontent').hide();
				    },
				    success: function( strData ){
				    	selectCallback(strData, 'unitSelect');
					}
				});
			  $('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#itemSelect").val()+'&initlevel=3');
			  $('#categorycontent').show();
			}		   						
		});

		//第4层
		$("#unitSelect").click(function(){
			if(null!=$(this).val()){
				$('#listSelect').find('option').remove().end();
				if($(this).val()[0]!='x')	
				$.ajax({
				    url: '<%=ServerValue.getMidContextPath()%>/category/checkJsonData.do',
				    type: 'post',
				    dataType: 'json',
				    data: {categoryid:$(this).val(), callback: 'selectCallback'},
				    cache: false,
				    beforeSend: function(xhr) {
						$("#loadingImg").dialog("open");
						$('#categorycontent').hide();
				    },
				    success: function( strData ){
				    	selectCallback(strData, 'listSelect');
					}
				});
				$('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#unitSelect").val()+'&initlevel=4');				
				$('#categorycontent').show();
			}		   						
		}); 

		//第5层
		$("#listSelect").click(function(){
			if(null!=$(this).val()){
				$('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#listSelect").val()+'&initlevel=5');
			}	   						
		});  


		//Search
		 $("input[name='submit']").click(function(){
			if (parseInt($("#categoryIdParam").val()) < 12 ){
				alert("不可编辑馆类别");
				$("#categoryIdParam").focus();
				return false;
			} 
			if ($("#categoryIdParam").val() == "" ){
				alert("请输入分类编号");
				$("#categoryIdParam").focus();
				return false;
			}else{
				$("#loadingImg").dialog("open");
				$('#categorycontent').load('<%=ServerValue.getMidContextPath()%>/category/editdata.do?id='+$("#categoryIdParam").val());
				$("#categorycontent").ajaxComplete(function( event,request, settings ){
		    		   $("#loadingImg").dialog("close");
		    	});
			}
		 });
    });

    function selectCallback(categories, reloadArea){
    	jQuery.each(categories, function(index , value){
        		var data = value.split(':');
        		if(data[0].substring(0,1) == "x"){
        			$('#'+reloadArea).append($("<option></option>").attr("value",data[0]).text(data[1]));
        		}else{
            		var cmark='';
            		if(data[2]=="Y"){
            			cmark=cmark+'○';//品牌
            		}
            		 if(data[3]=="Y"){
            			 cmark=cmark+'◎';//活動
            		}
             		 if(data[4]=="N"){
             			 cmark=cmark+'※';//是否可見
            		} 
                    if(data[2]!="Y" && data[3]!="Y" && data[4]!="N"){
						$('#'+reloadArea).append($("<option></option>").attr("value",data[0]).text(data[1]+'('+data[0]+')'));
            		}else{
            			$('#'+reloadArea).append($("<option></option>").attr("value",data[0]).text(cmark+data[1]+'('+data[0]+')'));
            		}
        		}
        });
    	$("#categorycontent").ajaxSuccess(function( event,request, settings ){
 		   $("#loadingImg").dialog("close");
 			});
	}
  
    //版型編號
	function process(msg) {
		$('#templatexxx').find('option').remove().end();
		$.each(msg,function(index, item){	
			$("#templatexxx").append("<option value='" + index + "'>" + item + "</option>");
		});
	}	
    //-->
    </script>     
        <h1>分类管理</h1>
        <b>分类编号：</b>
		<input name="categoryIdParam" id="categoryIdParam" type="text" title="分类编号" size="30" value="">
		<input type="button" id="submit_button" name="submit" value="搜寻"/>
		
        <table width="100%">
        <TR><td>
		        <div class="selHolder">
		            <h2>馆类别</h2>
		            <select id="categorySelect" name="categoryid" size="5" class="selCont">
		            	<c-rt:forEach items="${categoryRoot}" var="category">
										<option value="${category.id}">${category.isVisible eq 'N' ? '※' : ''}${category.name}(${category.id})</option>
									</c-rt:forEach>
		            </select>
		        </div>
		</td><td>        
		        <div class="selHolder">
		            <h2>分类1</h2>
		            <select id="elementSelect" name="categoryid" size="5" class="selCont">            	
		                <option>[none selected]</option>
		            </select>
		        </div>
		</td><td>        
		        <div class="selHolder">
		            <h2>分类2</h2>
		            <select id="attributeSelect" name="categoryid" size="5" class="selCont">
		                <option>[none selected]</option>
		            </select>
		        </div>
		</td></TR>
        <TR><td> <div class="selHolder">
		            <h2>分类3</h2>
		            <select id="itemSelect" name="categoryid" size="5" class="selCont">
		                <option>[none selected]</option>
		            </select>
		        </div>
		 </td><td>
		 		<div class="selHolder">
		            <h2>分类4</h2>
		            <select id="unitSelect" name="categoryid" size="5" class="selCont">
		                <option>[none selected]</option>
		            </select>
		        </div>
		 </td><td>
		 		<div class="selHolder">
		            <h2>分类5</h2>
		            <select id="listSelect" name="categoryid" size="5" class="selCont">
		                <option>[none selected]</option>
		            </select>
		        </div>
		 </td></TR>
        <TR><td COLSPAN=3><div class="selHolder2" id="categorycontent"></div></td></TR>
        </table>
        
<div id="loadingImg" style="display:none;">
	<img src="/images/loading.gif"/>资料载入中,请稍候...
</div>  